<template>
	<view class="content">
		<view class="img-gallary">
			<view
				class="img-border"
				v-bind:key="index"
				v-for="(item, index) in attachments"
				@click="imgPreview"
				:data-index="index"
			>
				<u-image
					width="105"
					height="150"
					mode="aspectFit"
					:src="item"
				></u-image>
			</view>
			<view class="img-uploader" @click="imgUpload">
				<u-icon name="plus" :size="60" />
			</view>
		</view>
	</view>
</template>

<script>
let BASE_URL = "http://localhost:5002/mp/";

import _ from "lodash";
import { mapState, mapMutations, mapGetters } from "vuex";

export default {
	props: {
		caseObj: {
			type: Object,
			default: () => {},
		},
	},
	data() {
		return {
			BASE_URL: BASE_URL,
		};
	},
	computed: {
		...mapState({
			attachments: (state) => {
				console.log(">>>this", state);
				let res = state.caseDetail.current_case.attachments.map(
					(r) => BASE_URL + "show/" + r.file_name
				);
				return res;
			},
		}),
	},
	methods: {
		imgPreview(e) {
			const index = e.currentTarget.dataset.index || "";
			uni.previewImage({
				current: parseInt(index),
				urls: this.attachments,
			});
		},
		imgUpload() {
			var self = this;
			uni.chooseImage({
				success: (chooseImageRes) => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					// console.log(tempFilePaths);
					uni.uploadFile({
						url: BASE_URL + "upload_pic",
						filePath: tempFilePaths[0],
						name: "file",
						formData: {
							case_id: this.caseObj._id["$oid"],
						},
						success: (uploadFileRes) => {
							self.$store.commit(
								"caseDetail/addAttachments",
								JSON.parse(uploadFileRes.data)
							);
						},
					});
				},
				fail: (err) => {
					console.error(">>> upload choose failed...", err);
				},
			});
		},
	},
};
</script>

<style scoped lang="scss">
.content {
	.img-gallary {
		display: flex;
		justify-content: flex-start;
		padding: 12rpx 0rpx;

		.img-border {
			// border: solid red 1rpx;
			margin-right: 24rpx;
			background-color: #999999;
			border-radius: 4rpx;

			:hover {
				box-shadow: 6rpx 6rpx 12rpx #acabab;
			}
		}

		.img-uploader {
			display: flex;
			align-items: center;
			height: 150rpx;
			width: 105rpx;
			background-color: #e2e2e2;
			justify-content: center;
			border-radius: 4rpx;
			// box-shadow: 2rpx 2rpx 1rpx #d8d7d7;
		}
	}
}
</style>
